<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cards</title>
</head>
<body>
    <h1>cards</h1>
    <div display="block">
        <p>
            <span>

                <img  src="./web/images/golang_logo.webp" width="80" height="80"  alt="加载失败" >
            </span>
            <span>
                <img  src="./web/images/cards/0/card_blank.png" width="75" height="85" title="反面牌"  alt="加载失败" >
            </span>
        </p>
    </div>
    
    <main>
        <div>
            <div id="parentDiv">
                <!-- 显示牌列表 -->
            </div>
            
        </div>
    </main>
</body>

<script type="text/javascript">
    // addElementImg("parentImg");
    addElementDiv("parentDiv");
    // addElementUl("parentUl");
    
    function addElementImg(obj) {
        var ul = document.getElementById(obj);
        //添加 li
        var li = document.createElement("li");
        //添加 img
        var img = document.createElement("img");
        //设置 img 属性，如 id
        img.setAttribute("id", "newImg");
        //设置 img 图片地址
        img.src = "./web/images/golang_logo.webp";
        li.appendChild(img);
        ul.appendChild(li);
    }

    // <div id="parentDiv"></div>
    function addElementDiv(obj) {
        let cards = {{.Cards}};
        let count = cards.length;
        // console.log(cards)
        // console.log(cards[0])
        console.log(count)
        if (count > 0){

            for (let k in cards) {
                // console.log(cards[k].Value)
                var parent = document.getElementById(obj);

                // var div = document.createElement("div");//添加 div
                // div.setAttribute("id", "newDiv");//设置 div 属性，如 id
                // div.innerHTML = "js 动态添加div";
                
                var img = document.createElement("img");
                img.setAttribute("id", "newImg");//设置 img 属性，如 id
                img.setAttribute("title", cards[k].Value + "-" + cards[k].Name);
                img.setAttribute("loading", "lazy");
                img.setAttribute("width", "75");
                // img.setAttribute("height", "85");
                img.src = "./web/images/cards/0/card_" + cards[k].Value +".png";//设置 img 图片地址
                
                parent.appendChild(img);
                
                // parent.appendChild(div);
            }
        }
    }

    // <ul id="parentUl"><li>原li</li></ul>
    function addElementUl(obj) {
        var ul = document.getElementById(obj);
        //添加 li
        var li = document.createElement("li");
        //设置 li 属性，如 id
        li.setAttribute("id", "newli");
        li.innerHTML = "js 动态添加li";
        ul.appendChild(li);
    }
</script>

</html>